<template>
	<!-- 首页-全能保姆 -->
	<view>
		<!-- <u-navbar back-icon-color="#000000" :title="titleName" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<u-navbar :back-text="titleName" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
			<!-- 全能保姆 -->
			<view>
				<!-- 查询条件 -->
				<view class="listTable_top">
					<!-- <view :class="[activek ? 'active' : 'noneactive']" @click="activek = !activek" style="text-align: left;">只看空闲</view> -->
					<!-- <view :class="[activek ? 'active' : 'noneactive']"></view> -->
					<view :class="[activem ? 'active' : 'noneactive']" @click="clickSore(1)">
						{{sortingName}}
						<u-icon name="arrow-down-fill" :color="activem ? '#FCA800' : '#858585'" style="font-size: 10px;margin-left: 4rpx;"></u-icon>
					</view>
					<view :class="[activeg ? 'active' : 'noneactive']" @click="clickSore(2)">
						高级筛选
						<image style="margin-left: 4rpx;width: 23rpx;height: 23rpx;" :src="activeg ? hoveUrl : noUrl"></image>
					</view>
				</view>
				<u-popup v-model="show" ref="popup_sex" mode="top" z-index="800">
					<view class="listTable_tops">
						<view :class="[mask.isclick == 1 ? 'active' : 'noneactive']" @click="mask.isclick = 1">
							{{sortingName}}
							<u-icon :name="mask.isclick == 1 ? 'arrow-up-fill' : 'arrow-down-fill'" :color="mask.isclick == 1 ? '#FCA800' : '#000000'"
							 style="font-size: 10px;margin-left: 4rpx;"></u-icon>
						</view>
						<view :class="[mask.isclick == 2 ? 'active' : 'noneactive']" @click="mask.isclick = 2">
							高级筛选
							<image style="margin-left: 4rpx;width: 23rpx;height: 23rpx;" :src="mask.isclick == 2 ? hoveUrl : noUrl"></image>
						</view>
					</view>
					<view style="margin-bottom: 16rpx;">
						<view class="sort_css" v-if="mask.isclick == 1" :style="{ color: iten.ischeck ? '#FCA800' : '#000000' }" v-for="(iten, index) in mask.list"
						 :key="index" @click="pitchonValue(iten, index)">
							{{ iten.item }}
						</view>
						<view class="skill_css" v-if="mask.isclick == 2">
							<view class="skill_css_box" v-for="(item, index) in mask.skillList" :key="index" @click="skillValue(item.skillId)">
								<view class="skill_css_box_botton " :style="selectSkil.indexOf(item.skillId)!=-1 ? 'background:#FCA800;color:#FFFFFF' : 'background:#F2F2F2;color:#666666'">
									{{ item.name }}
									<!-- view class="skill_css_box_icon" v-if="selectSkil.indexOf(item.skillId)!=-1">
										<u-icon name="checkbox-mark" color="#ffffff" size="22"></u-icon>
									</view> -->
								</view>
							</view>
							<view class="clears">
								<view class="clearsLeft" @click="clear()">
									重置
								</view>
								<view  class="clearsRight" @click="yes()">
									确定
								</view>
							</view>
						</view>
					</view>
				</u-popup>
				<!-- 内容 -->
				<mescroll-body top="0" :down="downOption" :up="upOption" :height="comHeight" ref="mescrollRef" @init="mescrollInit" @down="downCallback">
					<view v-if="!isShow" :key="counts">
						<view class="tables" v-for="(item,index) in employeesList" :key="index"  @click="jumpTohisResume(item)">
							<view style="padding: 12rpx 14rpx;">
								<u-row>
									<u-col span="12">
										<view style="overflow: hidden;">
											<image style="float: left;width: 40rpx;height: 40rpx;" :src="item.entPortrait"></image>
											<text class="typeface4" style="float: left;margin-left: 8rpx;">{{item.enterpriseName}}</text>
										</view>
										
										
										</u-col>
									<!-- <u-col span="6" text-align="right"> -->
										<!-- <text class="cancelButtom" @click.stop="updateCandidate(item,index)" v-if="item.choose">取消候选</text>
										<text class="joinButtom" @click.stop="updateCandidate(item,index)" v-else>加入候选</text> -->
									<!-- </u-col> -->
								</u-row>
							</view>

							<view style="margin: 18rpx 22rpx 10rpx 22rpx;">
								<u-row>
									<u-col span="3">
										<image :src="item.portrait" style="width: 165rpx;height: 220rpx;border-radius: 5rpx;object-fit: cover;" mode="aspectFill"></image>
									</u-col>
									<u-col span="9">
										<view style="display: flex;margin-left: 30rpx;align-items: center;">
											<view class="typeface5">{{item.name}}</view>
											<view class="typeface7"  style="color: #f29423;background-color: #FFF6EB;padding: 2rpx 10rpx;border-radius: 20rpx;">{{item.score}}分</view>
										</view>
										<!-- <view style="margin-top: 8rpx;">
											<text class="typeface7">个人评分:{{item.score}}</text>
											<u-rate :count="count" v-model="item.score" :disabled="true" active-color="#F29423" style="margin-left: 16rpx;"></u-rate>
										</view> -->
										<view class="typeface8" style="margin-top: 14rpx;padding-left: 30rpx;">
											<text>{{item.age}}岁</text>
											<text style="margin-left: 32rpx;">{{item.nativePlace}}人</text>
											<!-- <text style="margin-left: 32rpx;">服务{{item.workExperience}}年</text> -->
											<!-- <text style="margin-left: 32rpx;">{{item.education}}学历</text> -->
										</view>
										<view style="margin-top: 18rpx;display: flex; flex-wrap:wrap;height: 108rpx;padding-left: 30rpx;overflow: hidden;">
											<view v-for="(items,indexs) in item.skills" :key="indexs" v-if="indexs < 8" class="label">{{items}}</view>
										</view>
										<view class="typeface9">{{item.price}}{{item.unit}}</view>
									</u-col>
								</u-row>
								<view class="line"></view>
							</view>
						</view>

						<view style="margin-top: 50rpx;">
							<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{ prompt }}</u-divider>
						</view>
					</view>

					<view v-if="isShow" style="margin-top: 100rpx;text-align: center;">
						<image src="../../../static/img/1-38.png" style="width: 450rpx;height: 450rpx;"></image>
						<view class="typeface12">暂无搜索数据</view>
					</view>

				</mescroll-body>
			</view>

			<!-- <movable-area class="movableArea" @click="jumpToAuntCandidate">
				<movable-view class="movableView" direction="all" x="600rpx" y="800rpx">
					<image src="../../../static/img/1-22.png" mode="widthFix"></image>
					<view>{{candidateNumber}}人候选中</view>
				</movable-view>
			</movable-area> -->

			<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fca800',
				},
				mask: {
					pitchon: '',
					isclick: 1,
					skillList: [], //技能列表
					list: [{
							item: '年龄正序（从小到大）',
							ischeck: false,
							parameter: {
								orderType: 1,
								isAsc: 1
							}
						},
						{
							item: '年龄倒序（从大到小）',
							ischeck: false,
							parameter: {
								orderType: 1,
								isAsc: 0
							}
						},
						{
							item: '工资正序（从低到高）',
							ischeck: false,
							parameter: {
								orderType: 2,
								isAsc: 1
							}
						},
						{
							item: '工资倒序（从高到低）',
							ischeck: false,
							parameter: {
								orderType: 2,
								isAsc: 0
							}
						},
						// {
						// 	item: '经验正序（从少到多）',
						// 	ischeck: false,
						// 	parameter: {
						// 		orderType: 3,
						// 		isAsc: 1
						// 	}
						// },
						// {
						// 	item: '经验倒序（从多到少）',
						// 	ischeck: false,
						// 	parameter: {
						// 		orderType: 3,
						// 		isAsc: 0
						// 	}
						// }
					]
				}, //弹出层参数
				sortingName: '默认排序',
				show: false, //弹出框
				noUrl: '../../../static/icon/nofiltrate.png',
				hoveUrl: '../../../static/icon/filtrate-hover.png',
				activek: false, //默认不看空闲
				activem: false, //默认不排序
				activeg: false, //默认没有高级筛选
				count: 5,
				value: 3.5,
				// 下拉刷新配置
				downOption: {
					use: true,
					auto: true,
					offset: 40
				},
				upOption: {
					use: true,
					auto: false
				},
				mescroll: null,

				isShow: false,
				pageSize: 10,
				page: 1,
				employeesList: [],
				// prompt: '没有更多了',
				prompt: '',
				titleName: null,
				redirectId: null,
				siteName: null, //所在城市
				selectSkil: [], //选择技能
				orderType: null, //排序 1年龄2工资3经验
				isAsc: null, //1从低到高 0从高到低
				candidateNumber: null, //候选人数
				counts: 0,
				comHeight:0,

			};
		},
		onLoad(option) {
			var that = this;
			var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				width,
				height,
				right
			} = menuButtonInfo;
			uni.getSystemInfo({
				success: res => {
					const {
						statusBarHeight
					} = res;
					const margin = top - statusBarHeight;
					var navHeight = height + statusBarHeight + margin * 4;
					that.comHeight = (res.windowHeight - navHeight-44) + 'px';
				}
			});
			
			that.titleName = option.titleName;
			that.redirectId = option.redirectId;
			uni.getStorage({
				key: 'siteName',
				success: (res) => {
					that.siteName = res.data;
				},
			});
			that.getSkills();
			// this.page = 1,
			// this.employeesList = [];
			// this.prompt = '加载中....';
			// this.getDataList();
			// this.getcandidateNumber();
		},
		onReachBottom() {
			if (!this.isShow) {
				this.page += 1;
				this.getDataList();
			}
		},
		methods: {
			//获取候选人数
			getcandidateNumber: function() {
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'employee/chooseNum',
				};
				let data = {};
				this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {
						this.candidateNumber = res.data;
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				});
			},
			//修改候选状态
			updateCandidate: function(item, index) {
				//true:候选中   false:未候选
				if (item.choose) {
					let opts = {
						way: true, //true JSON请求；false 表单请求
						method: 'post',
						url: 'user-candidate/list/cancel',
					};
					let data = {
						employeeId: item.employeeId,
						businessId: this.redirectId,
						addType:2
					};
					this.http.httpTokenRequest(opts, data).then(res => {
						if (res.code == "200") {
							this.getcandidateNumber();
							this.employeesList[index].choose = false;
							this.counts += 1;
						} else {
							this.$refs.uToast.show({
								title: res.message,
								type: 'error'
							})
						}
					});
				} else {
					let opts = {
						way: true, //true JSON请求；false 表单请求
						method: 'post',
						url: 'user-candidate/add',
					};
					let data = {
						employeeId: item.employeeId,
						businessId: this.redirectId,
						addType:2
					};
					this.http.httpTokenRequest(opts, data).then(res => {
						if (res.code == "200") {
							this.getcandidateNumber();
							this.employeesList[index].choose = true;
							this.counts += 1;
						} else {
							this.$refs.uToast.show({
								title: res.message,
								type: 'error'
							})
						}
					});
				}
			},
			//筛选条件
			getSkills: function() {
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'employee/skill',
				};
				let data = {
					businessId: this.redirectId
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {
						this.mask.skillList = res.data;
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				});
			},
			//多选技能
			skillValue(id) {
				if (this.selectSkil.indexOf(id) != -1) {
					for (let i = 0; i < this.selectSkil.length; i++) {
						if (id == this.selectSkil[i]) {
							this.selectSkil.splice(i, 1);
						}
					}
				} else {
					this.selectSkil.push(id);
				}
				this.page = 1,
				this.employeesList = [];
				this.prompt = '加载中....';
				this.getDataList();
			},
			// 选中排序的值
			pitchonValue(iten, index) {
				this.orderType = iten.parameter.orderType; //排序 1年龄2工资3经验
				this.isAsc = iten.parameter.isAsc; //1从低到高 0从高到低

				this.mask.pitchon = iten;
				var i = 0;
				this.mask.list.forEach((item, inde) => {
					if (index == inde) {
						item.ischeck = !item.ischeck;
						this.sortingName = iten.item.substring(0, 4);
					} else {
						item.ischeck = false;
						this.sortingName = "默认排序";
					}
				});
				this.show = false;
				//判断是是否选中，没有的话高量false
				this.mask.list.forEach((item, inde) => {
					if (!item.ischeck) {
						i = i + 1;
					}
				});
				if (i == this.mask.list.length) {
					this.activem = false;
					this.sortingName = "默认排序";
				} else {
					this.activem = true;
					this.sortingName = iten.item.substring(0, 4);
				}

				this.page = 1,
				this.employeesList = [];
				this.prompt = '加载中....';
				this.getDataList();
			},
			// 点击排序显示排序的内容
			clickSore(type) {
				this.mask.isclick = type;
				this.show = true;
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新回调函数
			downCallback() {
				setTimeout(() => {
					this.page = 1,
					this.employeesList = [];
					this.prompt = '加载中....';
					this.getDataList();
					this.getcandidateNumber();
					this.mescroll.endSuccess();
				}, 500);
			},
			jumpTohisResume: function(item) {
				//她的简历 
				uni.navigateTo({
					url: '../matching/hisResume/hisResume?employeeId=' + item.employeeId + '&redirectId=' + this.redirectId +'&imgs='+item.entPortrait +
						'&addType=2'
				})

			},
			jumpToAuntCandidate: function() {
				//候选阿姨
				uni.navigateTo({
					url: "../matching/auntCandidate/auntCandidate"
				});
			},
			//获取数据列表
			getDataList: function() {
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'employee/list'
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if(typeof(this.siteName) !== "string"){
					this.siteName="郑州"
				}
				let data = {
					pageIndex: this.page,
					pageSize: this.pageSize,
					city: this.siteName == "" || !this.siteName?'郑州':this.siteName,
					businessId: this.redirectId,
					skills: this.selectSkil.join(','),
					orderType: this.orderType,
					isAsc: this.isAsc
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					//打印请求返回的数据  
					uni.hideLoading();
					if (res.code == "200") {
						if (res.data.records.length > 0 || this.page != 1) {
							this.isShow = false;
							if (res.data.current * res.data.size < res.data.total) {
								for (const key in res.data.records) {
									this.employeesList.push(res.data.records[key]);
								}
								this.prompt = '加载中....';
							} else {
								for (const key in res.data.records) {
									this.employeesList.push(res.data.records[key]);
								}
								this.prompt = '没有更多了';
							}
						} else {
							this.isShow = true;
						}
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}

				});
			},
			// 重置
			clear(){
				this.selectSkil = [];
			},
			// 确定
			yes(){
				this.page = 1,
				this.employeesList = [];
				this.$refs.popup_sex.close();
				this.getDataList()
			},
		}
	};
</script>

<style lang="less">
	// .tables {
	// 	margin-left: 60rpx;
	// 	margin-top: 32rpx;
	// 	width: 634rpx;
	// 	background: #ffffff;
	// 	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
	// 	opacity: 1;
	// }

	.typeface1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #7a7a7a;
		opacity: 1;
	}

	/* 查询条件 */
	.listTable_top {
		display: flex;
		width: 100%;
		margin: 0 auto;
	}

	.listTable_top view {
		color: #858585;
		// /* text-align: center; */
		width: 50%;
		line-height: 80rpx;
		text-align: center;
	}

	.listTable_tops {
		display: flex;
		width: 88%;
		margin: 40rpx auto;
	}

	.listTable_tops view {
		color: #000000;
		text-align: center;
		width: 50%;
		line-height: 80rpx;
	}

	.active {
		color: #fca800 !important;
	}

	.active .noneactive {
		color: #000000 !important;
	}

	/* 产品 */
	.listTable_content_prouct {
		box-shadow: 2px 6px 12px 2px rgba(0, 0, 0, 0.16);
		width: 90%;
		margin: 0 auto;
		border-radius: 10rpx;
		/* background-color: #606266; */
		/* height: 300rpx; */
	}

	.prouct_top {
		display: flex;
		border-bottom: 4rpx solid #dedede;
	}

	.prouct_top_left {
		padding: 12rpx 14rpx;
		width: 70%;
	}

	.prouct_top_right {
		width: 28%;
		/* padding: 8rpx 14rpx; */
	}

	.prouct_top_right .view1 {
		margin-top: 12rpx;
		margin-right: 8rpx;
		float: right;
		padding: 5rpx 10rpx;
		background-color: #fca800;
		border-radius: 6rpx;
		color: #fff;
		font-size: 18rpx;
	}

	.prouct_top_right .view2 {
		margin-top: 12rpx;
		margin-right: 8rpx;
		float: right;
		padding: 5rpx 10rpx;
		background-color: #fff;
		border-radius: 6rpx;
		color: #fca800;
		border: 2rpx solid #fca800;
		font-size: 18rpx;
	}

	.prouct_prouct {
		display: flex;
		width: 100%;
	}

	.u-drawer-content {
		margin-top: calc(var(--status-bar-height) + 39px);
		padding-top: 20rpx;
	}

	.prouct_prouct_img {
		width: 30%;
	}

	.prouct_prouct_img image {
		object-fit: cover;
		width: 200rpx;
		height: 260rpx;
	}

	.prouct_prouct_good {
		width: 70%;
		padding: 12rpx 4rpx;
	}

	.sort_css {
		line-height: 70rpx;
		color: #000000;
		padding: 0 30rpx;
	}

	.skill_css {
		padding: 12rpx 4rpx;
		display: flex;
		/* flex-direction:  column ; */
		flex-wrap: wrap;
	}

	.skill_css .skill_css_box {
		width: 33%;
		margin: 20rpx 0;
		position: relative;
	}

	.skill_css_box_botton {
		margin: 0 auto;
		width: 194rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 28rpx;
		border-radius: 32rpx;
		color: #666666;
		text-align: center;
	}

	.skill_css_box_icon {
		position: absolute;
		bottom: -2rpx;
		right: 27rpx;

		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		line-height: 30rpx;
		text-align: center;
		background-color: #fcc800;
	}

	.tables {
		margin-left: 30rpx;
		margin-top: 24rpx;
		width: 710rpx;
		background: #ffffff;
		// box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		// border-radius: 10rpx;
	}

	.typeface4 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #656565;
		opacity: 1;
	}

	.cancelButtom {
		text-align: center;
		background: #fca800;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #ffffff;
		opacity: 1;
		padding: 4rpx 12rpx;
	}

	.typeface5 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #656565;
		opacity: 1;
	}

	.typeface6 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f86565;
		opacity: 1;
	}

	.typeface7 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f29423;
		opacity: 1;
		margin-left: 28rpx;
	}

	.typeface8 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3f3f3f;
		opacity: 1;
	}

	.typeface9 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f29423;
		opacity: 1;
		text-align: right;
		margin-top: 20rpx;
	}

	.label {
		margin-top: 12rpx;
		margin-right: 10rpx;
		// width: 106rpx;
		padding: 0 10rpx;
		height: 42rpx;
		background: #F4F6F5;
		// border: 2rpx solid #f29423;
		opacity: 1;
		// border-radius: 10rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #B0B5B8;
		opacity: 1;
		// padding: 0 5rpx;
	}

	.joinButtom {
		border: 2rpx solid #f29423;
		opacity: 1;
		border-radius: 10rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f29423;
		opacity: 1;
		padding: 4rpx 12rpx;
	}

	.typeface10 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #858585;
		opacity: 1;
	}

	.typeface12 {
		margin-top: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666666;
		opacity: 1;
	}

	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素

		.movableView {
			pointer-events: auto; //可以点击
			text-align: center;
			width: 165rpx;
			margin-right: 15rpx;

			image {
				width: 124rpx;
				height: 124rpx;
			}

			view {
				width: 150rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fca800;
				opacity: 1;
			}
		}
	}
	.clears{
		display: flex;
		width: 100%;
	}
	.clearsLeft,.clearsRight{
		width: 50%;margin: 0 auto;text-align: center;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	.clearsLeft{
		color: #7A7A7A;
		border-right: 2px solid #F2F2F2;
	}
	.clearsRight{
		color: #FCA800;
	}
	.line {
		border: 2rpx solid #F5F5F5;
		opacity: 0.91;
		margin-top: 58rpx;
	}
</style>
